<template>
    <div>
        <div class="warp">
            <div class="nav">
                <div class="tab_nav">
                    <div :class="index == 0 ? 'active' : ''" @click.stop="changeCollect">追漫</div>
                    <div :class="index == 1 ? 'active' : ''" @click.stop="changeHistory">历史</div>
                </div>
                <div v-if="loginToken">
                    <div v-if="!edit" class="edit" @click.stop="changeEdit">编辑</div>
                    <div v-else class="edit" @click.stop="changeEdit">完成</div>
                </div>
            </div>
            <div v-show="index == 0 && edit == false" class="collect_content">
                <div class="collect" v-if="loginToken">
                    <collect-list :classifylist="collect" :edit="edit" :read="read"></collect-list>
                    <div class="loading" v-if="loading">
                        <van-loading size="24px" vertical text-color="#0094ff" color="#0094ff"
                            >加载中...</van-loading
                        >
                    </div>
                </div>
                <div v-else class="img_bg">
                    <img src="../assets/images/login-more.png" alt="" />
                    <div class="btn">
                        <van-button
                            @click.stop="login"
                            class="btn"
                            :disabled="false"
                            round
                            color="#32aaff"
                            size="small"
                            type="info"
                        >
                            <span class="iconfont icon-bilibili"></span>
                            账号登录
                        </van-button>
                    </div>
                </div>
            </div>

            <div v-show="index == 0 && edit == true" class="collect_content">
                <div class="collect" v-if="collect">
                    <collect-list
                        :edit="edit"
                        :classifylist="collect"
                        :read="read"
                        @choose="choose"
                    ></collect-list>
                    <div class="loading" v-if="loading">
                        <van-loading size="24px" vertical text-color="#0094ff" color="#0094ff"
                            >加载中...</van-loading
                        >
                    </div>
                </div>

                <div class="btns">
                    <button @click.stop="checkedAll">全选</button>
                    <button v-if="disabled" disabled style="color: #999">删除</button>
                    <button v-else @click.stop="del">删除</button>
                </div>
            </div>
            <div v-show="index == 1 && edit == false" class="history">
                <div v-if="historyList.length > 0">
                    <history-list
                        :edit="edit"
                        :historyList="historyList"
                        :read="read"
                    ></history-list>
                </div>
                <div v-else class="img_bg">
                    <img src="../assets/images/readHistor.png" alt="" />
                </div>
                <div class="loading" v-if="loading">
                    <van-loading size="24px" vertical text-color="#0094ff" color="#0094ff"
                        >加载中...</van-loading
                    >
                </div>
            </div>

            <div v-show="index == 1 && edit == true" class="history">
                <div v-if="historyList">
                    <history-list
                        :edit="edit"
                        :historyList="historyList"
                        @choose="choose"
                        :read="read"
                    ></history-list>
                </div>
                <div class="loading" v-if="loading">
                    <van-loading size="24px" vertical text-color="#0094ff" color="#0094ff"
                        >加载中...</van-loading
                    >
                </div>
                <div class="btns">
                    <button @click.stop="checkedAll">全选</button>
                    <button v-if="disabled" disabled style="color: #999">删除</button>
                    <button v-else @click.stop="del">删除</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from "vuex";
import CollectList from "@/components/collectList.vue";
import HistoryList from "@/components/historyList.vue";
export default {
    components: { CollectList, HistoryList },
    data() {
        return {
            collect: [],
            historyArr: [],
            history: [],
            read: [],
            index: 0,
            edit: false,
            disabled: true,
            loading: false,
            loginToken: void 0,
        };
    },
    computed: {
        ...mapState(["collectIdList"]),
        historyList() {
            return this.history;
        },
    },
    created() {
        this.getcollectList();
        this.getHistory();
        this.loginToken = localStorage.getItem("login");
    },
    methods: {
        async getcollectList() {
            let historyword = JSON.parse(localStorage.getItem("collect"));
            if (historyword) {
                if (historyword.length > 0) {
                    historyword.forEach((v) => {
                        this.historyArr.push({
                            id: v,
                            checked: false,
                        });
                    });
                } else {
                    this.historyArr = {
                        id: historyword[0],
                        checked: false,
                    };
                }
            }
            if (this.historyArr) {
                this.loading = false;
            }
            await this.historyArr.map((v) => {
                this.loading = true;
                this.axios.get("ComicDetail?comicId=" + v.id).then((res) => {
                    this.$set(res, "checked", false);
                    res.ep_list = res.ep_list.reverse();
                    this.collect.push(res);
                    this.loading = false;
                });
            });
        },
        async getHistory() {
            let read = JSON.parse(localStorage.getItem("readLog"));
            this.read = read;
            if (!read) {
                this.historyList == [];
                return;
            }
            this.read.forEach((v) => {
                this.$set(v, "checked", false);
            });

            await this.read.forEach((v) => {
                this.loading = true;
                this.axios.get("ComicDetail?comicId=" + v.comicid).then((res) => {
                    this.$set(res, "checked", false);

                    this.$set(res, "time", v.time);
                    this.history.push(res);
                    this.history.sort((a, b) => {
                        return b.time - a.time;
                    });

                    this.loading = false;
                });
            });
        },
        login() {
            this.$router.push("/login");
        },

        changeCollect() {
            this.index = 0;
        },
        changeHistory() {
            this.index = 1;
        },
        changeEdit() {
            this.edit = !this.edit;
        },
        checkedAll() {
            this.disabled = !this.disabled;
            if (this.index == 0) {
                this.collect.forEach((v) => {
                    if (this.disabled) {
                        v.checked = true;
                    } else {
                        v.checked = !v.checked;
                    }
                });
            } else {
                this.history.forEach((v) => {
                    if (this.disabled) {
                        v.checked = true;
                    } else {
                        v.checked = !v.checked;
                    }
                });
            }
        },
        del() {
            if (this.index == 0) {
                const arr = this.collect.filter((v) => v.checked == false);
                if (arr.length == 0) {
                    this.collect = [];
                    localStorage.removeItem("collect");
                } else {
                    this.collect = arr;
                    let newarr = this.historyArr.map((v) => {
                        if (!v.checked) {
                            return v.id;
                        }
                    });
                    newarr = newarr.filter((v) => v);

                    localStorage.setItem("collect", JSON.stringify(newarr));
                }
                this.edit = !this.edit;
            } else {
                const arr = this.history.filter((v) => v.checked == false);
                if (arr.length == 0) {
                    this.history = [];
                    localStorage.removeItem("readLog");
                } else {
                    this.history = arr;
                    let newarr = this.read.filter((v) => !v.checked);
                    localStorage.setItem("readLog", JSON.stringify(newarr));
                }
                this.edit = !this.edit;
            }
        },
        choose(id) {
            if (this.index == 0) {
                this.collect.forEach((v) => {
                    if (v.id == id) {
                        v.checked = !v.checked;
                    }
                });
                this.historyArr.forEach((v) => {
                    if (v.id == id) {
                        v.checked = !v.checked;
                    }
                });
                const arr = this.collect.filter((v) => v.checked == true);
                if (arr.length > 0) {
                    this.disabled = false;
                } else {
                    this.disabled = true;
                }
            } else {
                this.history.forEach((v) => {
                    if (v.id == id) {
                        v.checked = !v.checked;
                    }
                });
                this.read.forEach((v) => {
                    if (v.comicid == id) {
                        v.checked = !v.checked;
                    }
                });
                const arr = this.history.filter((v) => v.checked == true);
                if (arr.length > 0) {
                    this.disabled = false;
                } else {
                    this.disabled = true;
                }
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.warp {
    position: relative;
    .nav {
        position: fixed;
        top: 0;
        background: #fff;
        z-index: 100;
        line-height: 50px;
        .tab_nav {
            display: flex;
            padding-left: 15vw;
            width: 70vw;
            margin: auto;
            justify-content: space-evenly;
            .active {
                font-weight: bold;
                font-size: 16px;
                border-bottom: 3px solid red;
            }
        }
        .edit {
            position: absolute;
            top: 0;
            right: -15px;
        }
    }
    .collect_content {
        margin-top: 70px;
        .collect {
            margin: 16px;
        }
        .img_bg {
            position: relative;
            left: 0;
            top: 150px;
            text-align: center;
            .btn {
                margin-top: 5px;
            }
        }

        .btns {
            position: fixed;
            bottom: 50px;
            display: flex;
            width: 100vw;
            justify-content: space-evenly;
            border-top: 1px solid #ebecee;
            border-bottom: 1px solid #ebecee;
            button {
                list-style: none;
                border: none;
                background: none;
                padding: 10px 20px;
            }
        }
    }
    .history {
        margin-top: 70px;
        padding: 0 15px;
        .img_bg {
            position: relative;
            left: 0;
            top: 150px;
            text-align: center;
        }
        .btns {
            position: fixed;
            bottom: 50px;
            display: flex;
            width: 100vw;
            justify-content: space-evenly;
            border-top: 1px solid #ebecee;
            border-bottom: 1px solid #ebecee;
            button {
                list-style: none;
                border: none;
                background: none;
                padding: 10px 20px;
            }
        }
    }
}
</style>
